<template>
  <view class="course-page">
    <view class="page-header">
      <text class="page-title">精选课程</text>
    </view>
    
    <!-- 分类导航 -->
    <view class="category-nav">
      <view 
        v-for="(cat, index) in categories" 
        :key="index"
        class="category-item"
        :class="{ active: activeCategory === index }"
        @click="activeCategory = index"
      >
        {{ cat }}
      </view>
    </view>

    <!-- 课程列表 -->
    <view class="course-list">
      <view 
        v-for="course in filteredCourses" 
        :key="course.id"
        class="course-item"
        @click="goToCourseDetail(course.id)"
      >
        <image class="course-cover" :src="course.cover" mode="aspectFill" />
        <view class="course-info">
          <text class="course-title">{{ course.title }}</text>
          <text class="course-instructor">{{ course.instructor }}</text>
          <view class="course-stats">
            <text class="rating">⭐ {{ course.rating }}</text>
            <text class="students">{{ course.students }}人学习</text>
          </view>
          <view class="course-price">
            <text class="current-price">¥{{ course.price }}</text>
            <text class="original-price">¥{{ course.originalPrice }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const activeCategory = ref(0)
const categories = ['全部', '编程', '设计', '营销', '外语']

// 假数据
const courses = ref([
  {
    id: 1,
    title: 'Vue3 + TypeScript 实战课程',
    instructor: '张老师',
    price: 299,
    originalPrice: 399,
    cover: 'https://via.placeholder.com/300x200/ff6b35/ffffff?text=Vue3',
    rating: 4.8,
    students: 1234,
    category: 1
  },
  {
    id: 2,
    title: 'UI/UX 设计从入门到精通',
    instructor: '李老师',
    price: 199,
    originalPrice: 299,
    cover: 'https://via.placeholder.com/300x200/ff6b35/ffffff?text=UI设计',
    rating: 4.9,
    students: 2341,
    category: 2
  },
  {
    id: 3,
    title: '数字营销实战指南',
    instructor: '王老师',
    price: 158,
    originalPrice: 258,
    cover: 'https://via.placeholder.com/300x200/ff6b35/ffffff?text=营销',
    rating: 4.7,
    students: 987,
    category: 3
  }
])

const filteredCourses = computed(() => {
  if (activeCategory.value === 0) return courses.value
  return courses.value.filter(course => course.category === activeCategory.value)
})

const goToCourseDetail = (courseId) => {
  uni.navigateTo({ url: `/pages/CourseDetailPage/CourseDetailPage?courseId=${courseId}` })
}
</script>

<style scoped>
.course-page {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}
.page-header {
  background: #fff;
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
}
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}
.category-nav {
  display: flex;
  background: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
.category-item {
  padding: 15rpx 30rpx;
  margin-right: 20rpx;
  border-radius: 40rpx;
  font-size: 26rpx;
  color: #666;
  background: #f5f5f5;
}
.category-item.active {
  background: #ff6b35;
  color: #fff;
}
.course-list {
  padding: 0 20rpx;
}
.course-item {
  display: flex;
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}
.course-cover {
  width: 200rpx;
  height: 150rpx;
  flex-shrink: 0;
}
.course-info {
  flex: 1;
  padding: 20rpx;
}
.course-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}
.course-instructor {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}
.course-stats {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}
.rating {
  font-size: 22rpx;
  color: #ff6b35;
  margin-right: 20rpx;
}
.students {
  font-size: 22rpx;
  color: #999;
}
.course-price {
  display: flex;
  align-items: center;
  gap: 15rpx;
}
.current-price {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff6b35;
}
.original-price {
  font-size: 22rpx;
  color: #999;
  text-decoration: line-through;
}
</style>
